<template>
  <el-container>
    <!-- 左侧导航 -->
    <el-aside width="200px">
      <Left></Left>
    </el-aside>
    <el-container>
    <!-- 用户登录以及注册 -->
    <el-header>
      <Top></Top>
    </el-header>
    <!-- 右侧模块 -->
    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
  </el-container>
</template>

<script>
import Left from "../components/left.vue"
// import Index from "../views/index.vue"
import Top from '../components/top.vue'
export default {
  components: {
    Left,
    // Index,
    Top
  },
};
</script>

<style>
.el-header {
  background-color: #ffffff;
  color: #333;
  text-align: right;
  line-height: 60px;
  box-shadow: 0px 10px 0px 0px gainsboro;
}

.el-aside {
  background-color: #ff725c;
  color: white;
  text-align: left;
  min-height: 100vh;
}

.el-aside > div {
  line-height: 60px;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 6px;
}

.el-main {
  background-color: #f2f2f2;
  color: #333;
  /* line-height: 160px; */
}

body > .el-container {
  margin-bottom: 40px;
}
</style>